<template>
  <div>
    <div class="beijing">
      <div style="margin: 0px; position: relative">
        <select-city
          @citybooks="loadcitybooks"
          class="select-city"
        ></select-city>
        <search-bar
          @onSearch="searchResult"
          ref="searchBar"
          style="margin-top: -3%"
        ></search-bar>
      </div>
      <el-row style="height: 800px">
        <el-tooltip
          effect="dark"
          placement="right"
          v-for="item in books.slice(
            (currentPage - 1) * pagesize,
            currentPage * pagesize
          )"
          :key="item.bookId"
          style="position: absolute; margin-top: 5%"
        >
          <div
            style="
              font-size: 14px;
              margin-bottom: 6px;
              background-color: transparent;
            "
          >
            <p class="abstract">{{ item.remark }}</p>
            <el-card
              style="
                width: 142px;
                margin-bottom: 40px;
                height: 320px;
                float: left;
                margin-right: 15px;
              "
              class="book"
              bodyStyle="padding:10px"
              shadow="hover"
            >
              <div class="cover">
                <img
                  :src="item.bookCover"
                  alt="封面"
                  @click="clickcover(item)"
                />
              </div>
              <div class="info">
                <div class="title">
                  <p style="color: white;">{{ item.bookName }}</p>
                </div>
              </div>
              <div class="author">
                <span
                  style="
                    color: white;
                    text-decoration: line-through;
                    margin-right: 53%;
                  "
                  >￥：{{ (item.inPrice).toFixed(2) }}</span
                >
                <span style="color: #a1bf39; margin-left: -154%; margin-top: -31%"
                  >￥：{{ (item.inPrice * item.discount).toFixed(2) }}</span
                >
                <p style="color: white">数量：{{ item.quantity }}</p>
              </div>
              <el-button
                class="buy"
                round
                @click="buyChangeQuantity(item), shuxing(item)"
                >购买</el-button
              >
            </el-card>
          </div>

          <!-- <p> -->

          <!-- </p> -->
        </el-tooltip>
        <!-- <edit-form @onSubmit="loadBooks()" ref="edit"></edit-form> -->
        <!-- <information  ref="inf"></information> -->
      </el-row>
      <el-row>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pagesize"
          :total="books.length"
        >
        </el-pagination>
      </el-row>
      <buy-dialog ref="buydialog" @books="buyAfterBooks($event)"></buy-dialog>

      <!-- <reface ref="ref"></reface> -->
    </div>
  </div>
</template>
  <script>
import BuyDialog from "./BuyDialog.vue";
import SearchBar from "./SearchBar.vue";
import SelectCity from "./SelectCity.vue";
import BookComment from "./BookComment.vue";

export default {
  name: "Books",
  data() {
    return {
      books: [],
      pagesize: 12,
      currentPage: 1,
      buyitem: {},
    };
  },
  components: { SearchBar, BuyDialog, SelectCity, BookComment },
  methods: {
    loadbooks() {
      this.$axios.get("/getbooks").then((resp) => {
        this.books = resp.data;
        console.log(resp.data);
        console.log(this.books);
      });
    },
    buyChangeQuantity(item) {
      this.$refs.buydialog.centerDialogVisible = true;
      this.$refs.buydialog.item = item;
      //  this.books=this.$refs.buydialog.books
    },
    buyAfterBooks(data) {
      if (data != null) {
        this.loadbooks();
      }
    },
    searchResult() {
      var keywords = this.$refs.searchBar.keywords;
      console.log(keywords);
      if (keywords === "") {
        this.loadbooks();
      } else {
        var data = new FormData();
        data.append("keywords", keywords);
        this.$axios.post("/search", data).then((resp) => {
          if (resp.status == 200) {
            this.books = resp.data;
            console.log(resp.data);
          }
        });
      }
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage);
    },
    shuxing(item) {
      this.buyitem = item;

      sessionStorage.setItem("book", JSON.stringify(this.buyitem));
      console.log(sessionStorage.getItem("book"));
      this.$refs.buydialog.books = item;
      console.log(JSON.stringify(this.$refs.buydialog.books));
      this.$refs.buydialog.quantity = 0;
      this.$refs.buydialog.total = 0;
    },
    loadcitybooks(data) {
      this.books = data;
    },
    clickcover(item1) {
      sessionStorage.setItem("bookitem", JSON.stringify(item1));

      this.$router.replace({ path: "/bookcomment" });
    },
  },

  mounted: function () {
    this.loadbooks();
  },
};
</script>
  <style scoped>
.cover {
  width: 115px;
  height: 172px;
  margin-bottom: 7px;
  overflow: hidden;
  cursor: pointer;
}

img {
  width: 115px;
  height: 172px;
  /*margin: 0 auto;*/
}

/* .title {
    font-size: 14px;
    text-align: left;
    
  } */

.author {
  color: #333;
  width: 120px;
  font-size: 13px;
  margin-bottom: 10px;
  margin-left: 5px;
  text-align: center;
}

.abstract {
  display: block;
  line-height: 17px;
}

.el-icon-delete-solid {
  cursor: pointer;
  float: right;
}
.el-icon-edit-outline {
  cursor: pointer;
  float: left;
}

.switch {
  display: flex;
  position: absolute;
  left: 780px;
  top: 25px;
}

/* a {
    text-decoration: none;
  }

  a:link, a:visited, a:focus {
    color: #3377aa;
  } */
.beijing {
  width: 100%;
  height: 860px;
  position: relative;
}
.el-card {
  background-color: #19171791;
}

span {
  color: white;
}
.buy {
  background-color: #1c74b9cc;
  color: white;
}
.buy:hover {
  background-color: #a1bf39;
  color: white;
}
.el-pagination {
  color: #ececf0;
  background-color: transparent;
  cursor: default;
  font-weight: 700;
}
.select-city {
  cursor: pointer;
  background-color: #080808a6;
  width: 155px;
  margin-left: -82%;
  margin-right: 2%;
  margin-top: 1%;
}
.el-input__wrapper {
  display: inline-flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  padding: 1px 11px;

  background-image: none;
  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  transition: var(--el-transition-box-shadow);
  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color))
    inset;
}
</style>
